<template>
	<div class="pc-im van-hairline--top">
		<div
			class="pc-im-message"
			v-loading="message.loading"
		>
			<div class="pc-im-message-list" ref="pcImMessageList" v-if="message.list.length">
				<transition name="van-fade">
					<p
						class="pc-im-message-list-more"
						v-if="message.isShowMore"
						@click="clickLoadMore"
					>点击加载更多</p>
				</transition>

				<im-message-item
					v-for="item in message.list"
					:key="item.id"
					:item="item"
				></im-message-item>
			</div>
			<div v-if="!message.loading && !message.list.length" style="padding-top: 20px;">
				<el-empty description="快来互动吧！"/>
			</div>
		</div>
		<div class="pc-im-container van-hairline--top">
			<div class="pc-im-container-toolbar">
				<el-popover :width="500" placement="top">
					<template #reference>
						<img src="@/img/watch/emoil.svg" alt="" style="width: 20px;height:20px;cursor:pointer;">
					</template>
					<template #default>
						<div class="pc-emoil-list">
							<img
								v-for="(item, key) in emojiMap"
								:key="key"
								class="pc-emoil-item__inner"
								:src="`${emojiUrl}${item}`"
								alt=""
								@click="message.textValue += key"
							>
						</div>
					</template>
				</el-popover>
			</div>
			<textarea
				class="pc-im-container-content"
				rows="9"
				v-model="message.textValue"
				:placeholder="message.disabled ? '此功能暂不可用' : '请说点什么吧？'"
				:disabled="message.disabled"
			></textarea>
		</div>
	</div>
</template>

<script setup>
import { emojiUrl, emojiMap } from '@/utils/emojiMap'
import {onMounted, onUnmounted, ref, nextTick} from 'vue'
import ImMessageItem from "./im-message-item.vue";
import useTim from '../../hooks/useTim';

const pcImMessageList = ref()

const {message, clickLoadMore, sendMessage} = useTim();

// 键盘事件监听
async function handleWatchEnter({keyCode}) {
	switch (keyCode) {
		case 13:
			if (message.disabled) return
			const res = await sendMessage()
			if (res) {
				await nextTick(() => {
					pcImMessageList.value.scrollTop = pcImMessageList.value.scrollHeight
				})
			}
			break;
	}
}

onMounted(() => {
	document.addEventListener('keydown', handleWatchEnter)
})
onUnmounted(() => {
	document.removeEventListener('keydown', handleWatchEnter)
})
</script>

<style scoped lang="less">
.pc-im {
	cursor: initial;
	height: calc(100vh - var(--header-height) - 44px);

	&-message {
		height: calc(100% - var(--im-container-height));

		&-list {
			box-sizing: border-box;
			padding: 20px;
			height: 100%;
			overflow-y: auto;

			&::-webkit-scrollbar {
				width: 0px;
				height: 1px;
			}

			&-more {
				color: #fff;
				cursor: pointer;
				text-align: center;
				font-size: 14px;
			}
		}

		&-empty {
			height: 100%;
			display: flex;
			justify-content: center;
			flex-direction: column;
		}
	}

	&-container {
		height: var(--im-container-height);

		&-toolbar {
			height: var(--im-container-toolbar-height);
			box-sizing: border-box;
			padding: 10px 14px;
		}

		&-content {
			display: block;
			width: 100%;
			background-color: transparent;
			border: none;
			box-sizing: border-box;
			padding: 0 16px;
			outline: none;
			color: #fff;
			font-size: 14px;
			overflow-y: auto;
			resize:none;
			&::-webkit-scrollbar {
				width: 0;
				height: 1px;
			}
		}
	}
}

.pc-emoil-list{
	line-height: 0;
	.pc-emoil-item__inner {
		width: 24px;
		height: 24px;
		margin: 5px 6px;
		vertical-align: middle;
		cursor: pointer;
	}
}
</style>
